<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>工厂设计模式</title>
    <script>
        var FormFieldFactory = {
            makeField: (options) => {
                let _options = options || {},
                    type = _options.type || 'text',
                    displayText = _options.displayText || "",
                    field;
                switch (type) {
                    case "text":
                        field = new TextField(displayText)
                        break;
                    case 'email':
                        field = new EmailField(displayText)
                        break;
                    case 'button':
                        field = new ButtonField(displayText)
                        break;
                    default:
                        field = new TextField(displayText)
                        break;
                }
                return field;
            }

        }

        function TextField(displayText) {
            this.displayText = displayText
        }
        TextField.prototype.getElement = function () {
            let textField = document.createElement("input")
            textField.setAttribute("type", 'text')
            textField.setAttribute("placeholder", this.displayText)
            return textField;
        }

        function EmailField(displayText) {
            this.displayText = displayText
        }
        EmailField.prototype.getElement = function () {
            let emailField = document.createElement("input")
            emailField.setAttribute("type", 'email')
            emailField.setAttribute("placeholder", this.displayText)
            return emailField;
        }

        function ButtonField(displayText) {
            this.displayText = displayText
        }
        ButtonField.prototype.getElement = function () {
            let button = document.createElement("input")
            button.setAttribute("type", 'submit')
            button.innerHTML = this.displayText;
            return button;
        }

        var textField = FormFieldFactory.makeField({
                type: "text",
                displayText: 'Enter the first line of your address'
            }),
            emailField = FormFieldFactory.makeField({
                type: "email",
                displayText: 'Enter  your email'
            }),
            buttonField = FormFieldFactory.makeField({
                type: "button",
                displayText: 'Submit'
            })
        window.addEventListener("load", () => {
            let bodyElement = document.body;
            bodyElement.appendChild(textField.getElement())
            bodyElement.appendChild(emailField.getElement())
            bodyElement.appendChild(buttonField.getElement())
        }, false)
    </script>
</head>

<body>

</body>

</html>